import React, { Component } from 'react'
import { inject, observer} from 'mobx-react'
@inject('store') // <Provider store={store}/>
@observer
class App extends Component {
  componentDidMount () {
    console.log('mo', this.props)
    fetch('http://121.89.205.189/api/banner/list')
    .then(res => res.json())
    .then(res => {
        this.props.store.home.changeBannerList(res.data)
      })
    fetch('http://121.89.205.189/api/pro/list')
      .then(res => res.json())
      .then(res => {
          this.props.store.home.changeProList(res.data)
        })
  }
  render() {
    const { bannerList, proList } = this.props.store.home
    return (
      <div>
        {
          bannerList && bannerList.map((item, index) => {
            return <img src={ item.img } key={ index } alt ="" />
          })
        }
        {
          proList && proList.map(item => {
            return <div key = { item.proid }>{ item.proname }</div>
          })
        }
      </div>
    )
  }
}

export default App
